<template>
  <div class="home">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <!-- 下拉加载 -->
      <van-list
        v-model="loading"
        offset="-30"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!--              home页数据              -->
        <div class="head">
          <!-- 分类图标 &分类路由 -->
          <div class="cate">
            <van-icon
              tag="a"
              href="/cate"
              to="/cate"
              class-prefix="icon"
              name="chazhaobiaodanliebiao"
              size="24"
            />
          </div>

          <div class="logo">
            <img src="https://m.hua.com/content/vue/login/static/img/m_hualogo.png" />
          </div>
          <div>
            <van-icon class-prefix="icon" name="erji" size="24" />
          </div>
        </div>

        <!-- 轮播 -->
        <div class="slider">
          <swipe :slider="sliders"></swipe>
        </div>
        <div class="conpany-info">
          <!-- 企业认证 -->
        </div>
        <div class="procate">
          <catelist :cates="cates"></catelist>
        </div>
        <div class="recommend">
          <!-- 热门推荐 -->
          <recommend :goodlist="goodlist" @add_cart="add_cart"></recommend>
        </div>
       
      </van-list>
    </van-pull-refresh>

    <tabbar></tabbar>
 
  </div>
</template>

<script>
import tabbar from "@components/tabbar";
import Vue from "vue";
// 引入axios请求接口方法
import { fetchCate, fetchCateBanner, obtainapi } from "@api";
// 引入轮播图组件
import swipe from "@components/Swipe";

//引入分类子组件
import catelist from "./comonents/cate.vue";

//引入热门推荐
import recommend from "./comonents/recommend";
//引入提示刷新提示弹窗
import { Toast } from "vant";

import { mapActions} from 'vuex'

// import Loading  from  '@/pulgins/Loading/Loading.vue'
export default {
  data() {
    return {
      //轮播图数据存储
      sliders: [],
      // 存储首页分类信息
      cates: [],
      goodlist: [],
      //是否在刷新中
      isLoading: false,
      //是否加载完所有商品
      finished: false,
      //是否在加载中
      loading: false,
      page: 1,
      //  lock:true
    
      isfalse:false,
      ty:[]
    };
  },





  created() {

      this.getNum()

    //  请求轮播图 数据
    fetchCate({ page: 1, size: 5 }).then((res) => {
      // 判断状态码 根据返回状态码判断是否拿到数据
      console.log(this, 444);
      if (res.data.code === 200) {
        this.sliders = res.data.data;
      }
    });

    //请求分类数据
    fetchCateBanner().then((res) => {
      if (res.data.code === 200) {
        console.log("分类数据获取成功");
        //保存分类信息
        this.cates = res.data.data;
        console.log(this.cates);
        //请求分类图标
        obtainapi().then((res) => {
          for (let i = 0; i < this.cates.length; i++) {
            //合并分类数据
            this.cates[i].icon = res.data.data[i].icon;
          }
        });
      }
    });
  },





  methods: {

  
    ...mapActions(['add_cart','getNum']),
    insertGoods:function(item){
      console.log(item,8888);
      this.insert(item)
    },


    onRefresh() {
      console.log("刷新了");
      this.page = 1;
      this.isLoading = false;
      this.finished = false;
      this.loading = false;
      //请求一页数据
      fetchCate({ page: this.page, size: 1 }).then((res) => {
        // 判断状态码 根据返回状态码判断是否拿到数据
        if (res.data.code === 200) {
          this.goodlist = [];
          this.goodlist[0] = res.data.data[0];
          console.log(this.goodlist, 3333);
          this.page++;
          Toast.success("刷新成功");
        }
      });
    },





    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      console.log("开始加载");

      fetchCate({ page: this.page, size: 1 })
        .then((res) => {
          // 判断状态码 根据返回状态码判断是否拿到数据
          console.log(res, 5555);
          if (res.data.data.length === 0) {
            this.finished = true;
            return false;
          }
          if (res.data.code === 200) {
            this.goodlist = this.goodlist.concat(res.data.data);

            ++this.page;
            this.loading = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    
  },
  //注册组件
  components: {
    //轮播图组件
    swipe: swipe,
    // 商品分类组件
    catelist: catelist,
    //商品展示组件
    recommend: recommend,

    tabbar
   
    
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding: 10px 15px 50px;
}
.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  background: white;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .logo img {
    width: 150px;
    vertical-align: text-bottom;
  }
}
.slider {
  margin: 40px 0 20px;
}
.procate {
  padding: 10px 0;
  overflow: hidden;
  border-radius: 10px 10px;
  margin-top: 20px;
  background: #fff;
  margin-bottom: 20px;
}
.recommend {
  padding: 10px 0;
  background: white;
  border-radius: 10px;
}
</style>

